<script setup lang="ts">
import useDarkModeStore from '@/stores/darkMode'
import { ref } from 'vue'
import { switchNavBarTheme } from "@/utils/common"
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
  switchNavBarTheme()
})
const { isDark, switchDark } = useDarkModeStore()
const dark = ref(isDark)
const changeDark = () => {
  switchDark()
  switchNavBarTheme()
}
</script>

<template>
  <view class="content">
      <navigator class="item" url="./password">
        <view class="item-name">
          <image class="item-image" src="@/static/images/password.png" />
          <view>修改密码</view>
        </view>
        <wd-icon name="arrow-right" size="46rpx" color="#909399" />
      </navigator>
      <view class="item">
        <view class="item-name">
          <image class="item-image" src="@/static/images/dark.png" />
          <view>暗黑模式</view>
        </view>
        <wd-switch @change="changeDark" v-model="dark" active-color="#2796f2" />
      </view>
    </view>
</template>

<style scoped lang="scss">
.content {
  width: 94%;
  height: 200rpx;
  position: relative;
  top: 30rpx;
  margin-left: 3%;
  border-radius: 20rpx;
  background-color: var(--front-color);
  display: flex;
  flex-direction: column;
  .item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    .item-name {
      display: flex;
      align-items: center;
      .item-image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
    }
  }
  .item:nth-child(-n + 1) {
    border-bottom: #e5e5e5 1px solid;
  }
}
</style>